<template>
    <div class="right_top">
        <p style="font-size: 14px;padding-top: 8px; margin-left: 10px;">待处理</p>
        <div class="top-com">
            <div class="com-left">
                <div class="left-zuo">
                    <p style="color: #8A8C90;">退款申请</p>
                    <p style="margin-top: 5px;"><span
                            style="color: #0052DD; font-weight: bold; font-size: 14px;margin-right: 3px;">89</span>条</p>
                </div>
                <div class="left-you">
                    <el-icon :size="14" color="#9B9EA1">
                        <ArrowRight />
                    </el-icon>
                </div>
            </div>
            <div class="com-right">
                <div class="right-zuo">
                    <p style="color: #8A8C90;">退款申请</p>
                    <p style="margin-top: 5px;"><span
                            style="color: #0052DD; font-weight: bold; font-size: 14px;margin-right: 3px;">89</span>条</p>
                </div>
                <div class="right-you">
                    <el-icon :size="14" color="#9B9EA1">
                        <ArrowRight />
                    </el-icon>
                </div>
            </div>
        </div>
        <div class="top-bot">
            <div class="com-left">
                <div class="left-zuo">
                    <p style="color: #8A8C90;">退款申请</p>
                    <p style="margin-top: 5px;"><span
                            style="color: #0052DD; font-weight: bold; font-size: 14px;margin-right: 3px;">89</span>条</p>
                </div>
                <div class="left-you">
                    <el-icon :size="14" color="#9B9EA1">
                        <ArrowRight />
                    </el-icon>
                </div>
            </div>
            <div class="com-right">
                <div class="right-zuo">
                    <p style="color: #8A8C90;">退款申请</p>
                    <p style="margin-top: 5px;"><span
                            style="color: #0052DD; font-weight: bold; font-size: 14px;margin-right: 3px;">89</span>条</p>
                </div>
                <div class="right-you">
                    <el-icon :size="14" color="#9B9EA1">
                        <ArrowRight />
                    </el-icon>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.right_top {
    height: 174px;
    background: #fff;
    border-radius: 5px;

    // 中间
    .top-com {
        width: 100%;
        margin-top: 10px;
        height: 60px;
        display: flex;

        .com-left {
            width: 45%;
            height: 60px;
            background: #FAFAFC;
            margin-left: 10px;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;

            .left-zuo {
                margin-top: 10px;
                margin-left: 10px;
            }

            .left-you {
                text-align: center;
                line-height: 60px;
                margin-right: 5px;
            }
        }

        .com-right {
            width: 45%;
            height: 60px;
            background: #FAFAFC;
            margin-left: 10px;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;

            .right-zuo {
                margin-top: 10px;
                margin-left: 10px;
            }

            .right-you {
                text-align: center;
                line-height: 60px;
                margin-right: 5px;
            }
        }
    }

    // 下
    .top-bot {
        width: 100%;
        margin-top: 10px;
        height: 60px;
        display: flex;

        .com-left {
            width: 45%;
            height: 60px;
            background: #FAFAFC;
            margin-left: 10px;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;

            .left-zuo {
                margin-top: 10px;
                margin-left: 10px;
            }

            .left-you {
                text-align: center;
                line-height: 60px;
                margin-right: 5px;
            }
        }

        .com-right {
            width: 45%;
            height: 60px;
            background: #FAFAFC;
            margin-left: 10px;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;

            .right-zuo {
                margin-top: 10px;
                margin-left: 10px;
            }

            .right-you {
                text-align: center;
                line-height: 60px;
                margin-right: 5px;
            }
        }
    }
}
</style>